<template>
  <!-- 角色详情页面组件，展示角色信息、修炼功能和属性详情 -->
  <div class="character-container">
    
    <!-- 角色基本信息卡片 -->
    <el-card class="character-info">
      <template #header>
        <div class="card-header">
          <!-- 角色姓名 -->
          <span>{{ character.name }}</span>
          <!-- 角色境界 -->
          <span>{{ character.realm }}</span>
        </div>
      </template>
      <div class="character-details">
        <!-- 角色等级 -->
        <p>等级：{{ character.level }}</p>
        <!-- 灵根属性 -->
        <p>灵根：{{ character.element }}({{ character.elementPercent }}%)</p>
        <!-- 修为值 -->
        <p>修为：{{ character.cultivation }}/{{ character.maxCultivation }}</p>
        <!-- 生命值 -->
        <p>生命：{{ character.hp }}/{{ character.maxHp }}</p>
        <!-- 法力值 -->
        <p>法力：{{ character.mp }}/{{ character.maxMp }}</p>
      </div>
    </el-card>

    <!-- 修炼功能区域卡片 -->
    <el-card class="cultivation-section">
      <template #header>
        <div class="card-header">
          <span>修炼</span>
        </div>
      </template>
      <div class="cultivation-content">
        <!-- 修为进度条 -->
        <el-progress :percentage="cultivationPercentage" :stroke-width="20" :text-inside="true">
          <span>{{ character.cultivation }}/{{ character.maxCultivation }}</span>
        </el-progress>
        <!-- 修炼操作按钮 -->
        <div class="cultivation-buttons">
          <el-button type="primary" @click="cultivate" :disabled="isCultivating">
            {{ isCultivating ? '修炼中...' : '开始修炼' }}
          </el-button>
          <el-button @click="rest">打坐休息</el-button>
        </div>
      </div>
    </el-card>

    <!-- 属性详情卡片 -->
    <el-card class="attributes-section">
      <template #header>
        <div class="card-header">
          <span>属性</span>
        </div>
      </template>
      <div class="attributes-content">
        <!-- 属性网格布局 -->
        <div>
          <el-row :gutter="10" v-for="(row, index) in attributeRows" :key="index">
            <el-col :span="12">
              <div class="attribute-item">
                <span class="attribute-name">{{ row.left.name }}</span>
                <span class="attribute-value">{{ row.left.value }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="attribute-item">
                <span class="attribute-name">{{ row.right.name }}</span>
                <span class="attribute-value">{{ row.right.value }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
// 导入响应式引用和计算属性功能
import { ref, computed } from 'vue'

export default {
  name: 'Character',
  setup() {
    // 修炼状态标识
    const isCultivating = ref(false)
    // 修炼定时器
    const cultivationTimer = ref(null)

    // 角色基本信息数据
    const character = ref({
      name: '青云子',
      realm: '筑基初期',
      level: 5,
      cultivation: 1200,
      maxCultivation: 2000,
      element: '水',
      elementPercent: 75,
      hp: 150,
      maxHp: 150,
      mp: 100,
      maxMp: 100
    })

    // 角色属性数据
    const attributes = ref({
      attack: 80,
      defense: 60,
      critRate: 15,
      critDamage: 150
    })

    // 将属性组织成行的形式便于展示
    const attributeRows = computed(() => {
      const attrs = [
        { name: '攻击', value: attributes.value.attack },
        { name: '防御', value: attributes.value.defense },
        { name: '暴击', value: attributes.value.critRate + '%' },
        { name: '暴伤', value: attributes.value.critDamage + '%' }
      ];
      
      const rows = [];
      for (let i = 0; i < attrs.length; i += 2) {
        rows.push({
          left: attrs[i],
          right: attrs[i + 1] || {}
        });
      }
      return rows;
    });

    // 计算修为百分比
    const cultivationPercentage = computed(() => {
      return Math.round((character.value.cultivation / character.value.maxCultivation) * 100)
    })

    // 开始修炼方法
    const cultivate = () => {
      if (isCultivating.value) return
      isCultivating.value = true
      
      cultivationTimer.value = setInterval(() => {
        if (character.value.cultivation < character.value.maxCultivation) {
          character.value.cultivation += 10
          if (character.value.cultivation > character.value.maxCultivation) {
            character.value.cultivation = character.value.maxCultivation
          }
        } else {
          clearInterval(cultivationTimer.value)
          isCultivating.value = false
        }
      }, 1000)
    }

    // 打坐休息方法
    const rest = () => {
      clearInterval(cultivationTimer.value)
      isCultivating.value = false
      // 恢复生命和法力
      character.value.hp = character.value.maxHp
      character.value.mp = character.value.maxMp
    }
    
    // 返回数据和方法供模板使用
    return {
      character,
      attributes,
      attributeRows,
      cultivationPercentage,
      isCultivating,
      cultivate,
      rest
    }
  }
}
</script>

<style scoped>
/* 角色页面容器样式 */
.character-container {
  padding: 20px; overflow-y: auto; scrollbar-width: none; /* Firefox */
-webkit-scrollbar: none; /* Chrome, Safari and Opera */ overflow-y: auto; scrollbar-width: none; /* Firefox */
-webkit-scrollbar: none; /* Chrome, Safari and Opera */
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 70px; /* 为底部导航留出空间 */
  padding-top: 40px; /* 为顶部状态栏留出空间 */
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 角色详情段落样式 */
.character-details p {
  margin: 8px 0;
}

/* 修炼内容区域样式 */
.cultivation-content {
  padding: 20px 0;
}

/* 修炼按钮容器样式 */
.cultivation-buttons {
  margin-top: 20px;
  text-align: center;
}

/* 修炼按钮间距样式 */
.cultivation-buttons .el-button {
  margin: 0 10px;
}

/* 属性内容区域样式 */
.attributes-content {
  padding: 10px 0;
}

/* 单个属性项样式 */
.attribute-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

/* 属性名称样式 */
.attribute-name {
  font-weight: bold;
}

/* 属性值样式 */
.attribute-value {
  color: #409eff;
}

/* 移除了所有动画样式 */
</style>